<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            width: 300px;
        }

        thead {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <button id='btn'>添加</button>
    <div class="box">
        <table border='1px'>
            <thead>
                <tr>
                    <th>标题</th>
                    <th>地址</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody id='tbody'>

            </tbody>
        </table>
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var data = [{
                name: "传智播客",
                url: "http://www.itcast.cn",
                type: "IT最强培训机构"
            }, {
                name: "黑马程序员",
                url: "http://www.itheima.com",
                type: "大学生IT培训机构"
            }, {
                name: "传智前端学院",
                url: "http://web.itcast.cn",
                type: "前端的黄埔军校"
            }];
            $('#btn').click(function () {
                var list = [];
                for (var i = 0; i < data.length; i++) {
                    list.push('<tr>')
                    for (var key in data[i]) {
                        list.push('<td>')
                        list.push(data[i][key])
                        list.push('</td>')
                    }
                    list.push('</tr>')
                }
                var str = list.join('')
                $('#tbody').html(str);
            })
        })
    </script>
</body>

</html>